<template>
    <van-collapse v-model="activeNames" @change="changeCollapseIcon" :accordion="isOpenAccordion">
      <van-collapse-item name="1" :is-link="false">
        <div slot="title" class="titleSize">{{title}}</div>
        <div slot="right-icon"><img class="rightIcon" :src="rightIcon"></div>
        <div class="buttonFather">
          <collapse-my-product-button @changeScroll="changeScroll" v-for="(list,index) in productClassList" :key="index" :info="list"
                                      :direction="((index%2)==0)?'left':'right'"/>
        </div>
      </van-collapse-item>
    </van-collapse>
</template>

<script>
  import CollapseMyProductButton from '@/components/commonComponents/Collapse_MyProduct_Button'
    export default {
        name: "Collapse_MyProduct",
      props:{
        title:String,
        productClassList:{},
      },
      data(){
          return{
            rightIcon:require('@/assets/collapseIcon/collapse_+.png'),
            isOpen:false,
            isOpenAccordion:true,
            openIcon:require('@/assets/collapseIcon/collapse_+.png'),
            closeIcon:require('@/assets/collapseIcon/collapse_-.png'),
            collapseIcon:require('@/assets/collapseIcon/collapse_+.png'),
            activeNames:'0',
            isLink:false,
          }
      },
      computed:{
      },
      methods:{
        changeScroll(){
          this.$emit('changeScroll');
        },
        changeCollapseIcon(){
          if(this.isOpen){
            this.rightIcon=this.openIcon;
          }else{
            this.rightIcon=this.closeIcon;
          }
          this.isOpen=!this.isOpen;
        },
        getText(text){
          let str = 'productClass.'+text;
          return this.$t(str);
        },

      },
      components:{
        CollapseMyProductButton:CollapseMyProductButton,
      }
    }
</script>

<style scoped>
  .van-collapse{
    overflow: hidden;
  }
.van-collapse-item{
  text-align: left;
}
  .van-collapse-item__wrapper{
    background: #FFF;
  }
  .buttonFather{
    overflow: hidden;
    background: #FFF;
  }
  .collapseIcon{
    float:right;
    margin-right: 20px;
  }
  .van-cell:not(:last-child)::after{
    border:0;
  }
  .rightIcon{
    width: 20px;
    vertical-align: middle;
  }
  .titleSize{
    font-size:16px;
    font-weight: bold;
  }
</style>
